<template>
  <div id="app">
    <div id="nav">
      <h1>Welcome to Vue-Cli & Vue Routers</h1>
      <br />
      <hr />
      <router-link to="/"> Home </router-link> |
      <router-link to="/blog"> Blog </router-link> |
      <router-link to="/vlog"> Vlog </router-link> |
      <router-link to="/video"> Video </router-link> |
      <router-link to="/login"> Login? </router-link> |
      <span v-if="showUser">欢迎:{{ username }}</span>
      <button @click="logout">注销</button>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: JSON.parse(localStorage.getItem("user")),
      showUser: JSON.parse(localStorage.getItem("user")),
    };
  },
  watch: {
    "$route.path": function () {
      this.username = JSON.parse(localStorage.getItem("user"));
      this.showUser = JSON.parse(localStorage.getItem("user"));
    },
  },
  methods: {
    logout() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>
<style>
h1 {
  margin: 20px auto;
  text-align: center;
}
#nav {
  text-align: center;
  margin: 20px auto;
}
#app {
  margin: 20px auto;
  text-align: center;
}
</style>
